<template>
	<view class="box">
		<view class="box1">
			<view class="back">
				<image src="@/static/image/后退.png"></image>
			</view>
			<view class="sousuo">
				<u-search shape="round" :clearabled="true" :animation="true" bg-color="#fff"></u-search>
				<view class="a1">
					搜索
				</view>
			</view>
		</view>

		<view class="grid">
			<view class="grid-item" v-for="(item,index) in grid" :key="index">
				<image :src="item.icon" />
				<view class="grid-item-font">{{ item.text }}</view>
			</view>
			<!-- <view class="grid-item">
				<image src="@/static/image/分享.png"></image>
				<view>秒杀</view>
			</view> -->
		</view>
		<button @click="iid = 'a1'">去a1</button>
		<button @click="iid = 'a2'">去a2</button>
		<button @click="iid = 'a3'">去a3</button>
		<button @click="iid = 'a4'">去a4</button>
		<button @click="iid = 'a5'">去a5</button>
		<view class="">
			<scroll-view scroll-y="true" class="scroll-y" :scroll-with-animation="true" :scroll-into-view="iid"
				@scroll="scrollS">
				<view id="a1" class="scroll-list-style">a1</view>
				<view id="a2" class="scroll-list-style">a2</view>
				<view id="a3" class="scroll-list-style">a3</view>
				<view id="a4" class="scroll-list-style">a4</view>
				<view id="a5" class="scroll-list-style">a5</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		stubString
	} from 'lodash';
	import debounce from 'lodash/debounce';
	export default {
		data() {
			return {
				iid: 'a1',
				grid: [{
						id: 1,
						icon: "../../static/image/团购.png",
						text: "水果"
					},
					{
						id: 2,
						icon: "../../static/image/秒杀.png",
						text: "蔬菜"
					},
					{
						id: 3,
						icon: "../../static/image/精选.png",
						text: "肉类"
					},
					{
						id: 4,
						icon: "../../static/image/领劵.png",
						text: "海鲜"
					},
					{
						id: 5,
						icon: "../../static/image/分享.png",
						text: "熟食"
					},
				],
			}
		},
		methods: {
			scrollS: debounce(function(e) {
				let that = this;
				console.log('方法被防抖调用', e);
				let t = e.detail.scrollTop / 100;
				if (t == 0) {
					return
				} else {
					console.log(t / 2);
					that.iid = `a${t.toString().slice(0,1) / 2}`
					console.log(that.iid);
					return
				}
			}, 1000, {
				'trailing': true
			}), // 1000毫秒内只会调用一次
			sss(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.scroll-y {
		height: 200px;

		.scroll-list-style {
			height: 200px;
			background-color: #49ba7c;
		}
	}

	.box {

		.box1 {
			background-image: linear-gradient(#cdf1dd, #fff);
			height: 30vh;
			border-radius: 35rpx 35rpx 0 0;

			.back {
				image {
					padding-left: 2vh;
					width: 4vh;
					height: 4vh;
					margin-top: 5vh;
				}
			}

			.sousuo {
				width: 90%;
				margin: auto;
				padding-top: 3vh;
				position: relative;

				.a1 {
					color: #fff;
					background-color: #49ba7c;
					border-radius: 40rpx;
					padding: 10rpx 35rpx;
					position: absolute;
					right: 0.5vh;
					bottom: 0.3vh;
				}
			}
		}

		.grid {
			width: 90%;
			margin: -7vh auto 0;
			display: flex;
			justify-content: space-around;
			border-radius: 30rpx;
			padding: 30rpx 0;

			.grid-item {
				image {
					width: 6vh;
					height: 6vh;
					border-radius: 100%;
				}

				.grid-item-font {
					text-align: center;
				}
			}
		}
	}
</style>